<template>
    <div class="head-bar">
        <yk-space align="center" size='l' style="cursor: pointer;" @click="goHome()">
            <img src="../../assets/vue.svg" alt="logo" class="logo">
            <span class="name">管理后台</span>
        </yk-space>
        <yk-space align="center" size='xl'>
            <yk-badge is-dot>
                <IconMailOutline style="font-size: 20px;"/>
            </yk-badge>
            <yk-avatar
                img-url="../assets/vue.svg"
             ></yk-avatar>
             <div><yk-theme /></div>
             <yk-button>退出</yk-button>
        </yk-space>
    </div>
</template>

<script setup lang="ts">
import { useRouter } from 'vue-router';
const router = useRouter();
// 返回首页
const goHome = () => {
    router.push('/');
}
</script>

<style scoped lang="less">
.head-bar{
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    width: 100%;
    height: 64px;
    background-color: @bg-color-l;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 @space-xl;
    .logo{
        height: 24px;
        width: 38px;
    }
    .name{
        font-size: 20px;
        font-weight: 600;
    }
}
</style>